<template>
  <div class="user">
    <div class="menu">

      <div class="div1">
        <el-text tag="b" size="large">用户中心</el-text>
        <el-switch v-model="isCollapse" size="small" :active-value="false" :inactive-value="true" />
      </div>
      <el-menu :default-active="route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
        <el-menu-item index="/user/info" @click="goTo('/user/info')">
          <el-icon><i-ep-User /></el-icon>
          <span>用户信息</span>
        </el-menu-item>
        <el-menu-item index="/user/setpassword" @click="goTo('/user/setpassword')">
          <el-icon><i-ep-Setting /></el-icon>
          <span>修改密码</span>
        </el-menu-item>
        <el-menu-item index="/user/setuser" @click="goTo('/user/setuser')">
          <el-icon><i-ep-Warning /></el-icon>
          <span>编辑资料</span>
        </el-menu-item>
      </el-menu>
    </div>

    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router';
import { useGoTo } from '@/hooks/useGoTo';
const route = useRoute()

const { goTo } = useGoTo()

const isCollapse = ref(false)



</script>

<style scoped>

.user {
  display: flex;
  margin-top: 50px
}

.menu {
  flex: 2;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.main-content {
  flex: 8;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.div1 {
margin-left: 10px;
 margin-bottom: 30px; 
}

</style>